<div class="page-toolbar">
    <div class="page-filter">
        <form class="layui-form layui-form-pane" action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline">
                <input type="text" name="card_id" placeholder="请输入卡号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" class="field-status" type="select">
                    <option value="">请选择状态</option>
                    <option value="0">未解除</option>
                    <option value="1">解除</option>
                </select>
            </div>
            <label class="layui-form-label">预约时间段</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input field-starttime" value="" name="stime" id="starttime" readonly placeholder="请选择开始时间">
            </div>
            <div class="line">~</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input field-endtime" name="etime" id="endtime" readonly placeholder="请选择结束时间">
            </div>   
            <button type="submit" class="layui-btn layui-btn-warm">搜索</button>
        </div>
        </form>
    </div>
</div>
<table id="dataTable"></table>
{include file="admin@block/layui" /}
<script type="text/html" title="状态模板" id="statusTpl">
    <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="解除|未解除" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('status')}?table=violation&id={{ d.id }}">
</script>
<script type="text/javascript">
    layui.use(['table','layer','jquery','laydate'], function() {
        var table = layui.table,layer = layui.layer,$ = layui.jquery,laydate = layui.laydate, formType = {:json_encode(form_type())};
        table.render({
            elem: '#dataTable'
            ,url: '{:url('')}' //数据接口
            ,page: true //开启分页
            ,limit: 20
            ,text: {
                none : '暂无相关数据'
            }
            ,cols: [[ //表头
                 {field: 'card_id', title: '卡号', width: 120}
                ,{field: 'name', title: '姓名', width: 100}
                ,{field: 'reservationid', title: '预约ID', width: 100}
                ,{field: 'type', title: '违规类型', width: 150}
                ,{field: 'status', title: '状态', width: 100,templet: '#statusTpl'}
                ,{field: 'ctime', title: '违规时间', width: 150}
            ]]
        });
        laydate.render({
            elem: '#starttime',
            type: 'date',
            btns: ['clear', 'confirm']
        });
        laydate.render({
            elem: '#endtime',
            type: 'date',
            btns: ['clear', 'confirm']
        });
    });
</script>
<style type="text/css">
    .line{height: 38px;display: inline-block;line-height: 38px;float: left;padding: 0px 5px;color: #999;}
</style>